<template>
  <div class="content">
    <div class="top">
      <image mode="widthFix" class="top-img" :src="content.banner"></image>
      <div class="desc">
        <div class="name">{{ content.name }}</div>
        <div>
          市场价:
          <span class="origin-price">
            {{ content.originPrice }}
          </span>
          元
        </div>
      </div>
      <div class="tip">
        <image :src="'https://mini.jiaw.com/img/6559020211206.jpg'"></image>
        <div class="tip-desc">
          <text>爆款价</text>
          <text class="tip-price">¥{{ content.price }}</text>
        </div>
      </div>
    </div>
    <div class="bottom">
      <image mode="widthFix" :src="content.logo"></image>
      <div class="tag">
        <text @click="toShop">商铺</text>
        <text @click="call">电话</text>
        <text @click="buy">点击购买</text>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  onLoad({ content }) {
    this.content = JSON.parse(content)
  },
  data() {
    return {
      content: {}
    }
  },
  methods: {
    toShop() {
      uni.navigateTo({
        url:
          '/pages/package/shop/component/shop-detail?id=' + this.content.storeId
      })
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: '400-801-3280'
      })
    },
    buy() {
      uni.navigateTo({
        url:
          '/pages/package/hot-cake/pay?money=' +
          this.content.price +
          '&id=' +
          this.content.id +
          '&totalFee=' +
          this.content.originPrice +
          '&storeId=' +
          this.content.storeId
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  .top {
    font-size: 0;
    position: relative;
    .top-img {
      width: 100vw;
    }
    .desc {
      font-size: 16px;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-indent: 2em;
      background: #d32d26;
      color: #fff;
      .origin-price {
        text-decoration: line-through;
      }
    }
    .tip {
      position: absolute;
      right: 40px;
      bottom: 10px;
      image {
        width: 110px;
        height: 110px;
      }
      .tip-desc {
        font-size: 14px;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: rgb(245, 46, 46);
        text-align: center;
        .tip-price {
          font-size: 22px;
          display: block;
        }
      }
    }
  }
  .bottom {
    image {
      width: 100vw;
      display: block;
    }
    .tag {
      position: fixed;
      bottom: 15px;
      width: 100vw;
      text-align: center;
      text {
        color: #fff;
        background: red;
        margin: 0 20px;
        // display: inline-block;
        line-height: 30px;
        height: 30px;
        // width: 30px;
        font-size: 12px;
        padding: 9px;
        &:nth-child(1) {
          border-radius: 50%;
        }
        &:nth-child(2) {
          border-radius: 50%;
        }
        &:nth-child(3) {
          padding: 7px 20px;
          border-radius: 20px;
        }
      }
    }
  }
}
</style>
